<template>
  <div>
    <div class="staLiveDataWrap">
      <NavBar
        :title="'运检决策'"
        :cityName="cityName"
        :SeveralMenus="'1'"
        :text="'返回'"
        :areaName="areaName"
        @clicksPopul="clicksPopul"
      ></NavBar>
      <div class="neibox">
        <div class="decision-content">
          <div class="contexts">
            <div class="contextstop">
              <div class="searchsun">
                <p id="star" class="pstr" @click="starcity('star')">
                  <span class="startAddr"></span>
                  {{ startAddr.name }}
                </p>
                <p @click="tocity('end')" id="end" class="end">
                  <img
                    class="imgyunjian"
                    src="../assets/decision/yunjian/wz.png"
                    alt=""
                  /><span class="imgend">{{ endAddr.name }}</span>
                </p>
              </div>
              <div class="searchsun1">
                <span @click="jiaohuan"
                  ><img src="../assets/decision/yunjian/jt.png" alt=""
                /></span>
              </div>
            </div>
          </div>
          <div
            id="map"
            :class="
              getindex == -1 ||
              factorIndex == 4 ||
              hourWeatherInfoList.length == 0
                ? 'mapstar'
                : 'mapend'
            "
          ></div>
          <div class="typeLineNew">
            <div
              class="tyleLineNewBlock"
              :class="factorIndex == 0 ? 'active1' : 'deactive'"
              @click="changeFactor(0)"
            >
              <img
                v-if="factorIndex != 0"
                class="tlbImg"
                src="../assets/yubaoIcon/wendu.png"
                alt=""
              />
              <img
                v-else
                class="tlbImg"
                src="../assets/yubaoIcon/wenduActive.png"
                alt=""
              />

              <span class="tlbText">温度</span>
            </div>
            <div
              class="tyleLineNewBlock"
              :class="factorIndex == 3 ? 'active1' : 'deactive'"
              @click="changeFactor(3)"
            >
              <img
                v-if="factorIndex != 3"
                class="tlbImg"
                src="../assets/yubaoIcon/rain.png"
                alt=""
              />
              <img
                v-else
                class="tlbImg"
                src="../assets/yubaoIcon/rainActive.png"
                alt=""
              />

              <span class="tlbText">降雨</span>
            </div>
            <div
              class="tyleLineNewBlock"
              :class="factorIndex == 1 ? 'active1' : 'deactive'"
              @click="changeFactor(1)"
            >
              <img
                v-if="factorIndex != 1"
                class="tlbImg"
                src="../assets/yubaoIcon/shi.png"
                alt=""
              />
              <img
                v-else
                class="tlbImg"
                src="../assets/yubaoIcon/shiActive.png"
                alt=""
              />
              <!-- <img class="tlbImg" v-if="factorIndex == 1" src="../assets/yubaoIcon/shiActive.png" -->

              <span class="tlbText">湿度</span>
            </div>

            <div
              class="tyleLineNewBlock"
              :class="factorIndex == 2 ? 'active1' : 'deactive'"
              @click="changeFactor(2)"
            >
              <img
                v-if="factorIndex != 2"
                class="tlbImg"
                src="../assets/yubaoIcon/feng.png"
                alt=""
              />
              <img
                v-else
                class="tlbImg"
                src="../assets/yubaoIcon/fengActive.png"
                alt=""
              />

              <span class="tlbText">风速</span>
            </div>
            <div
              class="tyleLineNewBlock"
              :class="factorIndex == 4 ? 'active1' : 'deactive'"
              @click="changeFactor(4)"
            >
              <img
                v-if="factorIndex != 4"
                class="tlbImg"
                src="../assets/yubaoIcon/lei.png"
                alt=""
              />
              <img
                v-else
                class="tlbImg"
                src="../assets/yubaoIcon/leiActive.png"
                alt=""
              />

              <span class="tlbText">雷电</span>
            </div>
          </div>
        </div>
        <div></div>
        <div
          class="titleArea1"
          v-show="
            factorIndex == 0 &&
            hourWeatherInfoList.length != 0 &&
            factorIndex != 4
              ? true
              : false
          "
        >
          <span class="titleCon1"
            ><img
              src="../assets/decision/yun.png"
              style="width: 16px; height: 16px"
              alt=""
            />
            作业区域天气预报</span
          >
          <div id="ldTrendChart" class="ldTrendChart">
            <div
              id="map1"
              class="echart"
              :style="{ height: '100%', width: '100%' }"
            ></div>
          </div>
        </div>
        <div
          class="titleArea3"
          v-show="
            factorIndex == 1 &&
            factorIndex != 4 &&
            hourWeatherInfoList.length != 0
              ? true
              : false
          "
        >
          <span class="titleCon1"
            ><img
              src="../assets/decision/yun.png"
              style="width: 16px; height: 16px"
              alt=""
            />作业区域天气预报</span
          >

          <div id="ldTrendChart" class="ldTrendChart">
            <div
              id="map2"
              class="echart"
              :style="{ height: '100%', width: '100%' }"
            ></div>
          </div>
        </div>
        <div
          class="titleArea4"
          v-show="
            factorIndex == 2 &&
            factorIndex != 4 &&
            hourWeatherInfoList.length != 0
              ? true
              : false
          "
        >
          <span class="titleCon1"
            ><img
              src="../assets/decision/yun.png"
              style="width: 16px; height: 16px"
              alt=""
            />作业区域天气预报</span
          >

          <div id="ldTrendChart" class="ldTrendChart">
            <div
              id="map3"
              class="echart"
              :style="{ height: '100%', width: '100%' }"
            ></div>
          </div>
        </div>
        <div
          class="titleArea5"
          v-show="
            factorIndex == 3 &&
            factorIndex != 4 &&
            hourWeatherInfoList.length != 0
              ? true
              : false
          "
        >
          <span class="titleCon1"
            ><img
              src="../assets/decision/yun.png"
              style="width: 16px; height: 16px"
              alt=""
            />作业区域天气预报</span
          >

          <div id="ldTrendChart" class="ldTrendChart">
            <div
              id="map4"
              class="echart"
              :style="{ height: '100%', width: '100%' }"
            ></div>
          </div>
        </div>
        <!-- <div class="titleArea5" v-show="factorIndex == 4 ? true : false">
          <span class="titleCon1"
            ><img
              src="../assets/decision/yun.png"
              style="width: 16px;height: 16px;"
              alt=""
            />雷电预警</span
          >
        </div> -->
        <div
          v-if="titleArea0"
          :class="
            getindex == -1 ||
            factorIndex == 4 ||
            hourWeatherInfoList.length == 0
              ? 'titleArea0'
              : 'titleArea2'
          "
        >
          <span class="titleCon1">
            <img
              style="width: 16px; height: 16px"
              src="../assets/decision/ty.png"
              alt=""
            />
            {{ title }}影响程度</span
          >

          <div class="time">
            <img src="../assets/nz.png" alt="" />
            <div
              class="timechind"
              v-for="(item, index) in listlocal"
              :key="index"
            >
              <div :class="getindex == index ? 'getrain' : ''"></div>
              <div @click="getLocal(item, index)">{{ item.time }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="effect-degree" style="padding: 10px 0">
              <template v-for="item in effectDegrees">
                {{ item.value }}
                <div :class="`box${item.index}`">
                  <span></span>
                  <div>{{ item.label }}</div>
                </div>
              </template>
              <span>mm</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="staLiveDataWrap1">
        <van-nav-bar
          left-arrow
          left-text="返回"
          title="运检决策"
          @click-left="show = false"
        >
        </van-nav-bar>
        <div class="navtop">
          <img src="../assets/decision/dingwei.png" alt="" />
          <van-field
            @input="search"
            v-model="addr"
            @focus="focus($event)"
            ref="myField"
            :placeholder="citystring == 'star' ? '我的位置' : '目的地'"
          ></van-field>
          <div class="close" @click="show = false">取消</div>
        </div>

        <!-- <input @input="search" id="input" placeholder="" v-model="addr" type="text" /> -->
        <van-cell-group
          class="context"
          v-for="(item, index) in citys"
          :key="index"
        >
          <van-cell
            :title="item.name"
            :value="item.district"
            @click="getCityAndLocal(item)"
          />
        </van-cell-group>
      </div>
    </van-popup>
    <comArea
      v-if="showArea"
      @closeEmit="showArea = false"
      :arr="arr1"
      @confirmEmit="confirmEmitMet"
    >
    </comArea>
  </div>
</template>
<script>
import point from "@/assets/point.png";
import w from "@/components/mixins/weatherForecast.js";
import getdecisionApi from "../service/decision.js";
import * as echarts from "echarts";
import decisionechart from "../components/common/decisionechart.vue";
import forecastimg from "../assets/icon/leidianicon.png";
import Vue from "vue";
import { Field } from "vant";
import map from "@/util/map.js";
import { getItem } from "../util/storage.js";
import comArea from "@/components/common/area.vue";
Vue.use(Field);
export default {
  components: { decisionechart },
  data() {
    return {
      citystring: "",
      addr: "",
      ishows: false,
      arr1:[],
      citys: [],
      showss: false,
      indexac: 0,
      drivingTask: null,
      titleArea0: true,
      darwLinlist: [],
      showArea:false,
      chuxing: [
        {
          text: "驾车",
          img: "jiache",
        },
        {
          text: "公交",
          img: "gongjiao",
        },
        {
          text: "步行",
          img: "buxing",
        },
      ],
      effectDegrees: [
        { index: 1, value: 0, label: "无影响" },
        { index: 2, value: 10, label: "稍有影响" },
        { index: 3, value: 20, label: "一定影响" },
        { index: 4, value: 30, label: "较大影响" },
        { index: 5, value: 50, label: "严重影响" },
      ],
      walkingTask: null,
      truckDrivingTask: null,
      ridingTask: null,

      show: false,
      wenduist: [],
      geoPointWeathers: [],
      title: "温度",
      weatherForecast: w,
      listlocal: [
        {
          time: "10:00",
        },
        {
          time: "11:00",
        },
        {
          time: "12:00",
        },
        {
          time: "13:00",
        },
        {
          time: "14:00",
        },
        {
          time: "15:00",
        },
        {
          time: "16:00",
        },
      ],
      hourWeatherInfoList: [],
      getindex: -1,
      timesi: "",
      startAddr: {
        name: "你的位置",
        point: [],
        district: "",
        name1: "",
      },
      endAddr: {
        name: "你要去哪？",
        point: [],
        district: "",
        name1: "",
      },
      clickLocation: {
        city: "太原",
      },
      factorIndex: 0,
      map: null,
      LongAndLati: {
        lng: "",
        lat: "",
      },
      picture: {
        point: point,
      },
      type: "temperature",
      poly: {},
      elMarker1: [],
      elMarker: [],
      forecastimg: forecastimg,
      elMarkerLd: [],
      elMarker3: [],
      city: "",
      cityName:'',
      areaName:''
    };
  },
  watch: {
    show: {
      handler(newVal) {
        if (this.show == false) {
          if (
            this.endAddr.point.length != 0 &&
            this.startAddr.point.length != 0
          ) {
            if (this.factorIndex == 0) {
              this.getLocal({ time: this.listlocal[0].time }, 0);
            } else {
              this.getLocal(this.timesi, this.getindex);
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
    endAddr: {
      handler(newVal, oldVal) {
        if (newVal.point.length != 0) {
        } else {
          return;
        }
      },
      immediate: true,
      deep: true, // 可
    },
  },

  destroyed: function () {
    this.map.remove();
    // 离开页面生命周期函数
    // this.websocketclose()
  },
  created() {
    this.cityName = this.$store.getters.location[1].name;
    this.areaName = this.$store.getters.location[2].name;
    var location = getItem("location");
    this.city = location[1].name;
    map.init().then((res) => {
      this.LongAndLati.lng = this.$store.getters.cityLongAndLati[0];
      this.LongAndLati.lat = this.$store.getters.cityLongAndLati[1];
      this.startAddr.point = this.$store.getters.cityLongAndLati;
      var day = new Date();
      var days = day.getHours();
      var time = [];
      for (let i = 0; i < 8; i++) {
        if (days + i == 24) {
          days = 0;
          i = -1;
        } else {
          time.push({
            time: days + i + ":00",
          });
        }
        // 否则，将小时加一
      }

      this.listlocal = time;
      this.initMap();
    });
  },
  components: {
  
    comArea,
  },
  methods: {
    clicksPopul() {
      this.showArea = true;

      this.arr1 = [this.cityName, this.areaName];
    },
    confirmEmitMet(value) {
      var _this = this;
      _this.showArea = false;
      _this.$util.Convertlatitude(value).then((result) => {
     
       _this.location = [result[0], result[1]];
       _this.LongAndLati.lng= result[0]
      _this.LongAndLati.lat = result[1]
    
       _this.map.setCenter(    _this.location);

        _this.cityName = value[1].name;
        _this.areaName = value[2].name;
        _this.arr1 = [value[1].name, value[2].name];
        _this.clickMet(_this.map);
      });
    },
    focus(event) {
      event.currentTarget.select();
    },
    //时间方法
    getTime() {
      var datetime = new Date();
      //   this.getindex = 2
      var year = datetime.getFullYear();
      var month =
        datetime.getMonth() + 1 < 10
          ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      var date =
        datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();

      // return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;//返回 YYYY-MM-DD HH:MM:SS

      var times = `${year}-${month}-${date} ${this.timesi.time}${":00"}`;
      return times;
    },

    jiaohuan() {
      var Containers = {};
      Containers = this.endAddr;
      this.endAddr = this.startAddr;
      this.startAddr = Containers;
      this.title1 = this.endAddr.name;
      this.jiache();
    },
    initChart1(hourWeatherInfoList) {
      var time = [];
      var value = [];
      if (hourWeatherInfoList == undefined) {
        return;
      } else {
        hourWeatherInfoList.forEach((it) => {
          time.push(it.time);
          value.push(parseInt(it.value));
        });
      }

      const weatherIcons = {
        wendu: require("../assets/yubaoIcon/wenduActive.png"),
      };
      const myChart = echarts.init(document.getElementById("map1"));

      myChart.resize();
      const option = {
        title: {
          text: "温度",
          textStyle: {
            fontSize: 12, //字体大小
          },
        },
        backgroundColor: "#f3f7fa",
        textStyle: {
          color: "black",
        },

        grid: {
          top: "9%",
          left: "15%",
          right: "5%",
          bottom: "18%",
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            interval: 0,
          },

          boundaryGap: false,
          data: time,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#add1f4"],
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value, index) {
              return value + "{wendu|}";
            },

            // formatter: '{value} 雨',
            rich: {
              // value: {
              //     lineHeight: 20,
              //     align: 'center'

              wendu: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: weatherIcons.wendu,
                },
              },
            },
          },
          // axisLabel: {
          //     formatter: '{value} 雨',
          // },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },

          // axisLine: {
          //     show: true,
          // },
        },
        series: [
          {
            data: value,
            name: "换率",
            type: "line",
            areaStyle: {
              color: "#b9d8f4",
            },
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
          },
        ],
      };

      myChart.setOption(option); // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initChart2(hourWeatherInfoList) {
      var time = [];
      var value = [];
      if (hourWeatherInfoList == undefined) {
        return;
      } else {
        hourWeatherInfoList.forEach((it) => {
          time.push(it.time);
          value.push(parseInt(it.value));
        });
      }

      const weatherIcons = {
        shidu: require("../assets/yubaoIcon/shiActive.png"),
      };
      const myChart1 = echarts.init(document.getElementById("map2")); // 图标初始化
      myChart1.resize();
      const option = {
        backgroundColor: "#f3f7fa",
        title: {
          text: "湿度",
          textStyle: {
            fontSize: 12, //字体大小
          },
        },
        textStyle: {
          color: "black",
        },

        grid: {
          top: "9%",
          left: "15%",
          right: "5%",
          bottom: "18%",
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            interval: 0,
          },

          boundaryGap: false,
          data: time,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#add1f4"],
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value, index) {
              return value + "{shidu|}";
            },

            rich: {
              shidu: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: weatherIcons.shidu,
                },
              },
            },
          },

          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            data: value,
            name: "换率",
            type: "line",
            areaStyle: {
              color: "#b9d8f4",
            },
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
          },
        ],
      };

      myChart1.setOption(option); // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
    initChart3(hourWeatherInfoList) {
      var time = [];
      var value = [];
      if (hourWeatherInfoList == undefined) {
        return;
      } else {
        hourWeatherInfoList.forEach((it) => {
          time.push(it.time);
          value.push(parseInt(it.value));
        });
      }

      const weatherIcons = {
        fengsu: require("../assets/yubaoIcon/fengActive.png"),
      };
      const myChart2 = echarts.init(document.getElementById("map3")); // 图标初始化
      myChart2.resize();
      const option = {
        title: {
          text: "风速",
          textStyle: {
            fontSize: 12, //字体大小
          },
        },
        backgroundColor: "#f3f7fa",
        textStyle: {
          color: "black",
        },

        grid: {
          top: "9%",
          left: "15%",
          right: "5%",
          bottom: "18%",
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            interval: 0,
          },

          boundaryGap: false,
          data: time,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#add1f4"],
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value, index) {
              return value + "{fengsu|}";
            },

            rich: {
              fengsu: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: weatherIcons.fengsu,
                },
              },
            },
          },

          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            data: value,
            name: "换率",
            type: "line",
            areaStyle: {
              color: "#b9d8f4",
            },
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
          },
        ],
      };

      myChart2.setOption(option); // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart2.resize();
      });
    },
    initChart4(hourWeatherInfoList) {
      var time = [];
      var value = [];
      if (hourWeatherInfoList == undefined) {
        return;
      } else {
        hourWeatherInfoList.forEach((it) => {
          time.push(it.time);
          value.push(parseInt(it.value));
        });
      }

      const weatherIcons = {
        rain: require("../assets/icon/home/yu.png"),
      };
      const myChart3 = echarts.init(document.getElementById("map4")); // 图标初始化
      myChart3.resize();
      const option = {
        title: {
          text: "降雨",
          textStyle: {
            fontSize: 12, //字体大小
          },
        },
        backgroundColor: "#f3f7fa",
        textStyle: {
          color: "black",
        },

        grid: {
          top: "9%",
          left: "15%",
          right: "5%",
          bottom: "18%",
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            interval: 0,
          },

          boundaryGap: false,
          data: time,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#add1f4"],
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value, index) {
              return value + "{rain|}";
            },

            rich: {
              rain: {
                height: 20,
                align: "center",
                backgroundColor: {
                  image: weatherIcons.rain,
                },
              },
            },
          },

          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            data: value,
            name: "换率",
            type: "line",
            areaStyle: {
              color: "#b9d8f4",
            },
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
          },
        ],
      };

      myChart3.setOption(option); // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart3.resize();
      });
    },

    search() {
      let that = this;
      that.citys = [];
      var _this = this;
      if (that.addr != "") {
        SGMap.plugin("SGMap.AutoCompletePlusTask").then(function (res) {
          var autoCompletePlusTask = new SGMap.AutoCompletePlusTask();
          autoCompletePlusTask.search({
            keywords: _this.addr,
            complete: function (e, res) {
              if (res == undefined) {
                return;
              }

              res.tips.forEach((it) => {
                if (typeof it.location === "string") {
                  var s = it.district.includes("山西");

                  if (s == true) {
                    that.citys.push(it);
                  }
                }
              });
            },
          });
        });
      } else {
        _this.citys = [];
      }
    },
    getCityAndLocal(item) {
      this.show = false;
      console.log(item);
      if (this.citystring == "star") {
        if (typeof item.address === "string") {
          this.addr = item.district + item.address;
          this.startAddr.name = item.address + item.name;
          this.startAddr.district = item.district;
          this.startAddr.name1 = item.name;
        } else {
          this.addr = item.district;
          this.startAddr.name = item.name;
          this.startAddr.district = item.district;
          this.startAddr.name1 = item.name;
        }

        var arr = [];
        arr = item.location.split(",");
        this.startAddr.point = arr;
        this.startAddr.point = this.startAddr.point.map(Number);
        // console.log(this.endAddr);
      } else {
        if (typeof item.address === "string") {
          this.addr = item.district + item.address;
          this.endAddr.name = item.address + item.name;
          this.endAddr.district = item.district;
          this.endAddr.name1 = item.name;
        } else {
          this.addr = item.district;
          this.endAddr.name = item.name;
          this.endAddr.district = item.district;
          this.endAddr.name1 = item.name;
        }

        var arr = [];
        arr = item.location.split(",");
        this.endAddr.point = arr;
        this.endAddr.point = this.endAddr.point.map(Number);
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    initApi() {
      this.changeFactor(0, 0, "first");
    },
    initMap(location) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      var _this = this;
      // 倒入插件
      SGMap.plugin("SGMap.GeolocationTask");
      SGMap.plugin("SGMap.GeocodingTask");
      SGMap.plugin("SGMap.DrivingPlusTask");
      _this.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 9,
        // 地图中心点
        center: [_this.LongAndLati.lng, _this.LongAndLati.lat],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
        // 绑定事件
      });

      // 监听地图加载完成事件
      // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
      _this.map.on("load", function (e) {
        _this.$toast.clear();

        _this.addMarker(_this.map);

        _this.map.on("click", function (e) {
          _this.LongAndLati.lng = e.lngLat.lng;
          _this.LongAndLati.lat = e.lngLat.lat;
          _this.clickMet(_this.map);
        });
      });
    },

    // 添加Marker点
    addMarker(map) {
      var _this = this;
      //画marker点
      var el = document.createElement("div");
      el.className = "marker";
      el.style.backgroundImage = `url("${this.picture["point"]}")`;
      el.style.width = "35px";
      el.style.height = "30px";
      el.style.backgroundSize = "contain";

      var elMarker = new SGMap.Marker({
        element: el,
        anchor: "bottom",
      })
        .setLngLat([_this.LongAndLati.lng, _this.LongAndLati.lat])
        .addTo(map);
      _this.elMarker3.push(elMarker);
    },
    async clickMet(map) {
      //去除marker

      if (this.elMarker3.length != 0) {
        this.elMarker3.forEach((it) => {
          it.remove();
        });
      }
      //设置marker点
      this.addMarker(map);
      //点击位置
      this.clickLocation = await this.$util.lngLatToLocation(
        this.LongAndLati.lng,
        this.LongAndLati.lat
      );

      var item = this.clickLocation.regeocodes[0].pois[0];
      var district = this.clickLocation.regeocodes[0].formatted_address;
      if (item == undefined) {
        return;
      }

      this.startAddr.point = [this.LongAndLati.lng, this.LongAndLati.lat];
      this.addr = district + item.address;
      this.startAddr.name = item.address + item.name;
      this.startAddr.district = district;
      this.startAddr.name1 = item.name;
      if (this.startAddr.point.length != 0 && this.endAddr.point.length != 0) {
        this.getLocal(this.timesi, this.getindex);
      }

      //展示详情页面
      this.showDetail = true;
    },
    dianji() {
      var _that = this;
      var geo = new SGMap.GeolocationTask();
      geo.getLocation().then((data) => {
        var geocodingTask = new SGMap.GeocodingTask();
        // 逆地理编码
        geocodingTask
          .getAddress({
            location: data[0],
          })
          .then((result) => {
            _that.startAddr.name =
              result.addressComponent.district +
              result.addressComponent.address;
            _that.startAddr.point = data[0];
          });
      });
    },
    initMarker() {
      var el = document.createElement("div");
      el.className = "marker";
      el.style.backgroundImage =
        'url("https://map.sgcc.com.cn/products/js-sdk/v3/assets/images/markers_new2_4ab0bc5_78.png")';
      el.style.width = "25px";
      el.style.height = "38px";

      let elMarker = new SGMap.Marker({
        element: el,
        anchor: "bottom",
      });
    },
    geitlistwen() {
      // 获取当前日期和时间
      const datetime = new Date();
      const year = datetime.getFullYear();
      const month = (datetime.getMonth() + 1).toString().padStart(2, "0");
      const date = datetime.getDate().toString().padStart(2, "0");

      // 构建时间字符串
      const times = `${year}-${month}-${date} ${this.timesi.time}:00`;

      // 构建参数对象
      const parm = {
        starLongitude: this.startAddr.point[0],
        startLatitude: this.startAddr.point[1],
        endLongitude: this.endAddr.point[0],
        endLatitude: this.endAddr.point[1],
        indicator: this.type,
        departureTime: times,
      };

      // 获取数据
      getdecisionApi
        .getweather(parm)
        .then((res) => {
          // 移除地图标记
          if (this.elMarker.length !== 0) {
            this.elMarker.forEach((it) => it.remove());
            this.elMarker = [];
          }
          if (this.elMarker1.length !== 0) {
            this.elMarker1.forEach((it) => it.remove());
            this.elMarker1 = [];
          }

          if (this.type === "thunder") {
            this.darwLd(res);
          } else {
            // 移除地图路径和点
            if (this.darwLinlist.length !== 0) {
              this.darwLinlist.forEach((it) => {
                this.map.removeLayer(it);
                this.map.removeSource(it);
              });
              this.darwLinlist = [];
            }
            // 画路径和点
            this.darwLine(res);
            this.poin(res);
          }

          //   this.wenduist = res.data.endPointForecastWeather.hourWeatherInfoList
          this.initChart2(this.wenduist);
          this.initChart3(this.wenduist);
          this.initChart4(this.wenduist);
          this.initChart1(this.wenduist);

          // 触发窗口大小调整事件
          const myEvent = new Event("resize");
          window.dispatchEvent(myEvent);
        })
        .catch((err) => {
          // 错误处理
        });
    },
    //画雷电
    darwLd(res) {
      var _this = this;
      if (res.data.effectThunderHappenPointList.length == 0) {
        return;
      }
      var Ldlist = res.data.effectThunderHappenPointList;
      Ldlist.forEach((it) => {
        var el = document.createElement("div");

        el.className = "markerLd";

        el.style.width = "10px";
        el.style.height = "10px";
        el.style.background = `url("${forecastimg}") no-repeat`;
        el.style.width = "25px";
        el.style.height = "25px";

        // el.setAttribute(
        //   'data-name',
        //   JSON.stringify()
        // )

        var elMarker = new SGMap.Marker({
          element: el,
          anchor: "bottom",
        })
          .setLngLat([it.longitude, it.latitude])
          .addTo(_this.map);
        _this.elMarkerLd.push(elMarker);
      });
    },
    changeFactor(index, id, current) {
      this.factorIndex = index;
      var type = "";
      if (index != 4) {
        if (this.startAddr.point.length == 0) {
          this.$toast({
            message: "选择出发位置",
            position: "center",
          });
          this.factorIndex = 0;

          return;
        } else if (this.endAddr.point.length == 0) {
          this.$toast({
            message: "选择终点位置",
            position: "center",
          });
          this.factorIndex = 0;

          return;
        } else if (this.getindex == -1) {
          this.$toast({
            message: "选择时间",
            position: "center",
          });
          this.factorIndex = 0;
        }
      }

      if (index == 0) {
        type = "气温";
        this.title = "温度";
        this.type = "temperature";
        this.geitlistwen();
      } else if (index == 1) {
        type = "相对湿度";

        this.title = "湿度";
        this.type = "humidity";
        this.geitlistwen();
      } else if (index == 2) {
        type = "10m风速";
        this.title = "风速";
        this.type = "wind";
        this.geitlistwen();
      } else if (index == 3) {
        type = "10天地面总降水24小时累积量（3小时间隔)";
        this.title = "降雨";
        this.type = "rain";
        this.geitlistwen();
      } else if (index == 4) {
        type = "雷电";
        this.title = "雷电";
        this.type = "thunder";
        this.geitlistwen();
      }
      this.titleArea0 = true;
      this.$nextTick(() => {
        var myEvent = new Event("resize"); // 创建一个支持冒泡且不能被取消的resize事件
        window.dispatchEvent(myEvent); // 事件可以在任何元素触发
      });
    },
    tocity(end) {
      this.citystring = end;

      this.addr = this.endAddr.name;
      this.$nextTick(() => {
        this.$refs.myField.focus();
      });
      this.search();
      this.show = true;
      //   this.endAddr.name = '你要去哪？'
    },
    starcity(star) {
      this.citystring = star;
      this.addr = this.startAddr.name;
      this.$nextTick(() => {
        this.$refs.myField.focus();
        // var box = document.getElementById('star')

        // // 获取当前选中范围的对象
        // var selection = window.getSelection()
        // // 创建一个范围对象
        // var range = document.createRange()
        // // 选中 box 元素中的所有文本内容
        // range.selectNodeContents(box)
        // // 清除之前的选中内容
        // selection.removeAllRanges()
        // // 将范围对象添加到选中范围中
        // selection.addRange(range)
      });
      this.search();
      this.show = true;
    },

    clearSearch() {
      drivingTask.clear();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getLocal(item, index) {
      this.timesi = item;
      let _this = this;

      if (_this.startAddr.point.length == 0) {
        this.$toast({
          message: "选择出发位置",
          position: "center",
        });
        this.getindex = -1;
        return;
      }
      if (_this.endAddr.point.length == 0) {
        this.$toast({
          message: "选择终点位置",
          position: "center",
        });
        this.getindex = -1;
        return;
      }
      this.$toast({
        message: "开始规划路线",
        position: "center",
      });

      var datetime = new Date();

      var year = datetime.getFullYear();
      var month =
        datetime.getMonth() + 1 < 10
          ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      var date =
        datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();

      // return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;//返回 YYYY-MM-DD HH:MM:SS

      var times = `${year}-${month}-${date} ${item.time}${":00"}`;

      let parm = {
        starLongitude: _this.startAddr.point[0],
        startLatitude: _this.startAddr.point[1],
        endLongitude: _this.endAddr.point[0],
        endLatitude: _this.endAddr.point[1],
        indicator: _this.type,
        departureTime: times,
      };

      // 获取数据
      getdecisionApi
        .getweather(parm)
        .then((res) => {
          console.log(res);
          if (_this.type == "thunder") {
            this.getindex = index;

            return;
          }

          this.hourWeatherInfoList =
            res.data.endPointForecastWeather.hourWeatherInfoList;

          this.$nextTick(() => {
            var myEvent = new Event("resize"); // 创建一个支持冒泡且不能被取消的resize事件
            window.dispatchEvent(myEvent); // 事件可以在任何元素触发
          });
          this.initChart1(this.hourWeatherInfoList);
          this.initChart2(this.hourWeatherInfoList);
          this.initChart3(this.hourWeatherInfoList);
          this.initChart4(this.hourWeatherInfoList);
          this.getindex = index;
          // 地图平移
          _this.map.panTo([_this.startAddr.point[0], _this.startAddr.point[1]]);
          // 设置中心点配置
          _this.map.setCenter([
            _this.startAddr.point[0],
            _this.startAddr.point[1],
          ]);
          // 修改缩放比例

          // 修改缩放比例
          _this.map.setZoom(6.3);
          if (_this.darwLinlist.length != 0) {
            _this.darwLinlist.forEach((it) => {
              _this.map.removeLayer(it);
              _this.map.removeSource(it);
            });
          }

          if (_this.elMarker.length != 0) {
            _this.elMarker.forEach((it) => {
              it.remove();
            });
          }
          if (_this.elMarker1.length != 0) {
            _this.elMarker1.forEach((it) => {
              it.remove();
            });
          }
          if (_this.elMarker3.length != 0) {
            _this.elMarker3.forEach((it) => {
              it.remove();
            });
          }
          // 画路径
          _this.darwLine(res);
          // 画路线上的点
          _this.poin(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //画路线上的点
    poin(res) {
      var _this = this;
      _this.elMarker1 = [];
      _this.elMarker = [];
      var geoPointWeathers = res.data.geoPointWeathers;
      for (let i = 0; i < geoPointWeathers.length; i++) {
        var el = document.createElement("div");
        var el1 = document.createElement("div");
        el.className = "marker";
        el1.className = "marker1";
        el.style.width = "5px";
        el.style.height = "5px";

        el.style.borderRadius = "50%";
        el.style.backgroundColor = "#f37045";
        el.setAttribute(
          "data-name",
          JSON.stringify(geoPointWeathers[i].geoPointWeathers)
        );
        el1.style.width = "70px";
        el1.style.height = "25px";
        el1.style.left = "10px";
        el1.style.borderRadius = "5px";
        el1.style.color = "#282a36";
        el1.style.backgroundColor = "#fff";
        el1.style.fontSize = "12px";
        el1.style.textAlign = "center";
        el1.style.lineHeight = "25px";
        el1.innerHTML =
          _this.title + ":" + geoPointWeathers[i].hourWeatherInfoList[0].value;
        var elMarker = new SGMap.Marker({
          element: el,
          anchor: "bottom",
        })
          .setLngLat([
            geoPointWeathers[i].longitude,
            geoPointWeathers[i].latitude,
          ])
          .addTo(_this.map);
        _this.elMarker.push(elMarker);
        var elMarker1 = new SGMap.Marker({
          element: el1,
          anchor: "left",
        })
          .setLngLat([
            geoPointWeathers[i].longitude,
            geoPointWeathers[i].latitude,
          ])
          .addTo(_this.map);
        _this.elMarker1.push(elMarker1);
      }
    },
    darwLine(res) {
      //画线路

      let _this = this;
      _this.darwLinlist = [];
      let geo = res.data.pathObject.route.paths[0].steps;

      for (let i = 0; i < geo.length; i++) {
        let point = geo[i].polyline;
        let ponitArray = point.split(";");
        let testpoint = [];

        for (let p = 0; p < ponitArray.length; p++) {
          let coords = ponitArray[p].split(",").map(parseFloat);
          testpoint.push(coords);
        }

        let layerId = `power-line-${i}`;
        _this.darwLinlist.push(layerId);

        _this.map.addLayer({
          id: layerId,
          type: "line",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [],
            },
          },
          layout: {
            "line-cap": "round",
            "line-join": "round",
          },
          paint: {
            "line-color": geo[i].color,
            "line-width": 8,
          },
        });

        _this.map.getSource(layerId).setData({
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                coordinates: testpoint,
              },
            },
          ],
        });
      }

      if (
        _this.map.getLayer("choicePoi") == undefined &&
        _this.map.getLayer("pointEndLayer") == undefined
      ) {
        _this.drawStartPoint();
        _this.drawEndPoint();
      } else {
        _this.map.removeLayer("choicePoi");
        _this.map.removeSource("choicePoi");
        _this.map.removeLayer("pointEndLayer");
        _this.map.removeSource("pointEndLayer");
        _this.map.removeImage("poi");
        _this.map.removeImage("poi1");
        _this.drawStartPoint();
        _this.drawEndPoint();
      }
    },

    drawStartPoint() {
      //画起点
      let _this = this;
      var str = _this.startAddr.point;

      _this.map.loadImage(
        "",
        function (error, image) {
          _this.map.addImage("poi", image);
        }
      );
      _this.map.addLayer({
        id: "choicePoi",
        type: "symbol",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [],
          },
        },
        layout: {
          "icon-image": "poi",
          "icon-size": 1,
          "icon-ignore-placement": true,
          "text-ignore-placement": false,
          "text-field": "{name}",
          "text-size": 8,
          "text-anchor": "top",
          "text-allow-overlap": false,
          "icon-anchor": "bottom",
          "text-offset": [0, 0],
          "text-max-width": 8,
          "text-font": ["Microsoft YaHei Regular"],
        },
        paint: {
          "text-color": "#ff0000",
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1.33333,
        },
      });
      _this.map.getSource(`choicePoi`).setData({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: str,
            },
            properties: {
              name: "",
            },
          },
        ],
      });
    },
    drawEndPoint() {
      // 画终点

      let _this = this;

      var end = _this.endAddr.point;
      _this.map.loadImage(
        "",
        function (error, image) {
          _this.map.addImage("poi1", image);
        }
      );
      _this.map.addLayer({
        id: "pointEndLayer",
        type: "symbol",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [],
          },
        },
        layout: {
          "icon-image": "poi1",
          "icon-size": 1,
          "icon-ignore-placement": true,
          "text-ignore-placement": false,
          "text-field": "{name}",
          "text-size": 12,
          "text-anchor": "top",
          "text-allow-overlap": false,
          "icon-anchor": "bottom",
          "text-offset": [0, 0],
          "text-max-width": 8,
          "text-font": ["Microsoft YaHei Regular"],
        },
        paint: {
          "text-color": "#ff0000",
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1.33333,
        },
      });
      _this.map.getSource(`pointEndLayer`).setData({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: end,
            },
            properties: {
              name: "",
            },
          },
        ],
      });
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/deep/ .van-nav-bar__content {
  width: 100%;
  position: absolute;
  background: #357cff;
}
.mapstar {
  width: 100% !important;
  height: 100% !important;
}
.mapend {
  width: 100% !important;
  height: 1100px !important;
}
.rightname {
  color: #fff;
}

.main {
  width: 100%;
  height: 100%;
  position: absolute;
}

.active1 {
  color: #56b4e5;
}

.deavtive {
  background-color: #fff;
  margin-bottom: 20px;
  text-align: center;
}

.bottomCon {
  text-align: center;
  position: absolute;
  z-index: 9999;
  color: #fff;
  bottom: 20px;
  width: 100%;
  font-size: 16px;
}

.staLiveDataWrap1 {
  position: absolute;
  background-color: #f2f3f5;
  width: 100%;
  height: 100%;
  .navtop {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 48px;
    background: #ffffff;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
    img {
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 30px;
      z-index: 999;
      transform: translate(-50%, -50%);
    }
    .close {
      position: absolute;
      width: 26px;
      height: 19px;
      top: 50%;
      right: 0px;
      z-index: 999;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      transform: translate(-50%, -50%);
    }
    /deep/ .van-cell {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-field__control {
      position: absolute;
      top: 50%;
      left: 170px;
      display: block;
      transform: translate(-50%, -50%);
      width: 320px;
      height: 34px;
      padding-left: 38px;

      background-color: #f5f5f5 !important;
      border-radius: 17px;
    }
    /deep/ .van-field__control::-webkit-input-placeholder {
      font-size: 13px;

      font-weight: 400;
      color: #999999;
    }
  }
  .select {
    top: 180px;
  }

  .context {
    top: 100px;
    /deep/ .van-cell {
      width: 100%;
      height: 48px;
      line-height: 50px;
      padding-left: 10px;
      padding-right: 10px;
      /deep/ .van-cell__title {
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #101010;
      }
    }
  }
}
/deep/ .van-cell__value {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400 !important;
  color: #656b75 !important;
}

.staLiveDataWrap1 /deep/ .select {
  width: 90%;
}

.staLiveDataWrap {
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;

  background-color: #f4f4f4;

  .neibox {
    // padding: 15px;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .ldTrendChart {
    width: 100%;
    position: absolute;
    // background-color: rgb(248, 248, 248);
    overflow-x: auto;
    border-radius: 10px;
    height: 280px;
    top: 40px;
  }
}

// .main_container {
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
// }

.lis {
  padding: 8px 11px;
  height: 0px;
  text-align: center;
  background: #357cff;
  border-radius: 40px;
  color: #fff !important;
}

.titleArea {
  width: 100%;
  height: 164px;

  .titleCon {
    position: absolute;
    top: 6px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

  .titleCon1 {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    img {
      width: 16px;
      height: 16px;
    }
  }

  .remider_text {
    position: absolute;
    top: 46px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

.titleArea1,
.titleArea3,
.titleArea4,
.titleArea5 {
  width: 345px;
  position: absolute;
  top: 690px;
  height: 200px;
  background: linear-gradient(180deg, #d5e3ff 0%, #f5f8fe 8%, #ffffff 100%);
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.3);
  border-radius: 20px;
  left: 50%;
  transform: translate(-50%, -50%);

  .titleCon {
    position: absolute;
    top: 6px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

  .titleCon1 {
    position: absolute;
    top: 6px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    img {
      width: 16px;
      height: 16px;
    }
  }

  .remider_text {
    position: absolute;
    top: 46px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

.time {
  width: 100%;
  display: flex;
  position: absolute;
  overflow-x: auto;
  top: 40px;
  font-size: 15px;
  // justify-content: space-evenly;

  img {
    width: 16px;
    height: 16px;
  }

  .timechind {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 70px;
    text-align: left;
    :nth-child(1) {
      width: 60px;
      height: 6px;

      background-color: #afafaf;
      border-radius: 6px;
    }
  }
}
/deep/ .time::-webkit-scrollbar {
  display: none;
}
.getrain {
  background-color: #1c62ee !important;
}

.titleArea2 {
  width: 345px;
  height: 149px;
  background: linear-gradient(180deg, #d5e3ff 0%, #f5f8fe 8%, #ffffff 100%);
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.3);
  border-radius: 20px;
  top: 1000px;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 0;
  position: absolute;

  .titleCon {
    position: absolute;
    top: 6px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

  .titleCon1 {
    position: absolute;
    top: 6px;
    left: 5px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    img {
      width: 16px;
      height: 16px;
    }
  }

  .remider_text {
    position: absolute;
    top: 46px;

    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}
.titleArea0 {
  position: absolute;
  width: 345px;
  height: 130px;
  background: linear-gradient(180deg, #d5e3ff 0%, #f5f8fe 8%, #ffffff 100%);
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.3);
  border-radius: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: -45px;

  .bottom {
    position: absolute;
    width: 100%;
    // background-color: rgb(172, 163, 163);
    // height: 70px;

    // margin-bottom: 30px;
  }
  .titleCon {
    position: absolute;
    top: 6px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

  .titleCon1 {
    position: absolute;
    top: 6px;
    left: 5px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
  }

  .remider_text {
    position: absolute;
    top: 46px;

    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

.decision-content {
  position: absolute;

  width: 100%;
  height: 100%;
  .contexts {
    position: absolute;
    width: 345px;
    height: 100px;
    z-index: 99;
    top: 120px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(191, 191, 191, 0.4);
    border-radius: 10px;
    .contextstop {
      display: flex;
      position: absolute;
      width: 315px;
      height: 68px;
      background: #f5f5f5;
      border-radius: 10px;
      top: 48px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      align-items: center;
      font-weight: 400;
      color: #101010;
      .searchsun {
        display: inline-block;
        width: 70%;
        margin-left: 6px;
      }
      .searchsun1 {
        position: absolute;
        right: 10px;
        font-size: 30px;
        img {
          width: 20px;
        }
      }
    }
  }
  .search {
    position: absolute;
    z-index: 99;
    justify-content: center;
    display: flex;
    height: 80px;
    align-items: center;
    margin: 6px 15px;

    background-color: rgb(242, 244, 247);
    border-radius: 5px;

    p {
      font-size: 14px;
      font-weight: bold;
    }

    img {
      width: 30px;
      height: 30px;
    }

    input {
      border: 1px solid #f2f4f7;
      background-color: #f2f4f7;
      width: 200px;
    }
  }

  .active {
    font-size: 14px;
    padding: 20px 11px;
    float: left;
    font-weight: bold;
    width: 100%;
    background-color: #4853ea;
  }

  .actives {
    width: 100%;
    font-size: 14px;
    padding: 20px 11px;
    float: left;
    font-weight: bold;
  }

  .way {
    position: absolute;
    z-index: 99;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    bottom: 0;
    overflow: hidden;

    li {
      display: flex;

      flex-direction: row;
      font-size: 13px;

      font-weight: 400;
      color: #656b75;

      align-items: center;
      height: 10px;
      font-size: 14px;
      padding: 14px 9px;

      line-height: 8px;

      .imagess {
        vertical-align: middle;
        width: 20px;
        height: 20px;
        transform: rotate(360deg);
        float: left;
      }
    }

    :last-child {
      transform: rotate(90deg);
      font-size: 16px;
    }
  }
}

.effect-degree {
  position: absolute;
  display: flex;
  width: 100%;
  //   height: 100px;
  justify-content: space-evenly;
  top: 70px;
  font-size: 12px;

  .box1 {
    display: flex;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656b75;
    flex-direction: column;
    align-items: center;

    span {
      display: block;
      font-size: 12px;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      text-align: center;

      background-color: #00c56d;
      margin-bottom: 5px;
    }
  }

  .box2 {
    display: flex;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656b75;
    flex-direction: column;
    align-items: center;

    span {
      display: block;
      font-size: 12px;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      text-align: center;
      background-color: rgb(99, 184, 249);
      margin-bottom: 5px;
    }
  }

  .box3 {
    display: flex;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656b75;
    flex-direction: column;
    align-items: center;

    span {
      display: block;
      font-size: 12px;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      text-align: center;

      background-color: rgb(0, 0, 249);
      margin-bottom: 5px;
    }
  }

  .box4 {
    display: flex;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656b75;
    flex-direction: column;
    align-items: center;

    span {
      display: block;
      font-size: 12px;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      text-align: center;

      background-color: #f6d202;
      margin-bottom: 5px;
    }
  }

  .box5 {
    display: flex;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656b75;
    flex-direction: column;
    align-items: center;

    span {
      display: block;
      font-size: 12px;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      text-align: center;

      background-color: #ea0d3e;
      margin-bottom: 5px;
    }
  }
}
.pstr {
  margin-left: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.startAddr {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #357cff;
  margin-right: 6px;
}
.end {
  margin-top: 10px;
  margin-left: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.imgyunjian {
  width: 8px;
  height: 8px;
}
.imgend {
  margin-left: 9px;
}
</style>
